<template>
  <el-container class="page-preview">
    <el-main>
      <el-row :gutter="20">
        <el-col class="sa-col-12" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div
            v-if="
              props.modal.params.data.type == 'diypage' ||
              state.templateData.platform.includes('H5') ||
              state.templateData.platform.includes('WechatOfficialAccount')
            "
            class="left sa-flex-col sa-col-center"
          >
            <div class="preview-title">此为预览效果，实际效果请扫码查看</div>
            <div class="web-preview">
              <div v-if="isShowIframe" class="web-preview-msg">
                <span v-html="isShowIframe"></span>
              </div>
              <iframe v-else id="preview" :src="url.H5" frameborder="1" height="600px"></iframe>
            </div>
          </div>
        </el-col>
        <el-col class="sa-col-12" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="name">{{ state.templateData.name }}</div>
          <template
            v-if="
              props.modal.params.data.type == 'diypage' || state.templateData.platform.length > 0
            "
          >
            <div class="platform sa-m-b-20">
              <sa-icon
                class="sa-m-r-8"
                v-for="pl in state.templateData.platform"
                :key="pl"
                :icon="'sa-shop-decorate-' + pl"
                :style="{
                  color: platformList.filter((pf) => {
                    return pf.type == pl;
                  })[0].color,
                }"
                size="20"
              />
            </div>
            <div
              v-if="
                props.modal.params.data.type == 'diypage' ||
                state.templateData.platform.includes('H5') ||
                state.templateData.platform.includes('WechatOfficialAccount')
              "
              class="h5"
            >
              <qrcode-vue :value="url.H5" :size="132" level="H" />
              <div class="tip sa-m-t-12">微信扫描二维码即可预览</div>
            </div>
            <div
              v-if="
                props.modal.params.data.type == 'diypage' ||
                state.templateData.platform.includes('WechatMiniProgram')
              "
              class="wechat"
            >
              <sa-image class="" :url="url.WechatMiniProgram" size="132"></sa-image>
              <div class="tip sa-m-t-12">微信扫描小程序即可预览</div>
            </div>
          </template>
          <div class="copyright">星品科技Shopro版权所有 Copyright 2020-2022</div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script setup>
  import { computed, onMounted, reactive } from 'vue';
  import { api as configApi } from '@/app/shop/admin/config/config.service';
  import { api } from '../decorate.service';
  import { platformList } from '../page/data';
  import QrcodeVue from 'qrcode.vue';

  const props = defineProps(['modal']);

  const state = reactive({
    templateData: props.modal.params.data,
    domain: '',
  });

  async function getConfig() {
    const { error, data } = await configApi.basic();
    error === 0 && (state.domain = data.domain);
  }

  const url = computed(() => {
    return {
      H5: `${props.modal.params.data.h5Url}`,
      WechatMiniProgram: `${props.modal.params.data.wxacode}`,
    };
  });

  const isShowIframe = computed(() => {
    if (window.location.protocol == 'https:' && url.value.H5.split('://')[0] == 'http') {
      return '您的商城前端域名ssl未开启，<br/>请扫码预览';
    } else {
      if (!state.domain) {
        return '请在商城配置设置您的前端域名';
      }
    }
  });

  onMounted(() => {
    getConfig();
  });
</script>

<style lang="scss">
  .sa-dialog.preview-dialog {
    max-height: 76vh;
    margin: 12vh auto;
    @media only screen and (max-width: 768px) {
      max-height: 100vh;
      margin: 0;
    }
  }
</style>

<style lang="scss" scoped>
  .page-preview {
    text-align: center;
    .el-main {
      --el-main-padding: 20px 20px 0 20px;
    }
    .left {
      width: 100%;
      margin-bottom: 20px;
    }
    .preview-title {
      color: var(--sa-subtitle);
      margin-bottom: 12px;
    }
    .web-preview {
      width: 300px;
      height: 594px;
      background: url('/static/images/shop/decorate/preview_bg.png');
      padding: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      color: #434343;
      #preview {
        border: none;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        border-radius: 26px;
      }
    }
    .name {
      font-size: 18px;
      color: var(--sa-title);
      margin-bottom: 12px;
    }
    .copyright {
      font-size: 12px;
      color: var(--sa-subfont);
      margin-bottom: 12px;
    }
    .h5,
    .wechat {
      display: flex;
      flex-direction: column;
      align-items: center;
      .tip {
        font-size: 14px;
        color: var(--sa-font);
        margin-bottom: 24px;
      }
    }
  }
</style>
